<template>
  <div class="mb-2">
    <el-button type="primary" @click="showDialog=true">新增</el-button>
  </div>

  <AutoTable :table-data="tableData" :columns="columns">
    <template #handle="scope">
      <el-button type="primary" size="small">修改</el-button>
      <el-button type="danger" size="small">删除</el-button>
    </template>
  </AutoTable>
  <!--  弹窗-->
  <el-dialog v-model="showDialog" title="新增分类" width="500px">
    <div>
      <el-form :label-width="80">
        <el-form-item label="分类名称">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="分类描述">
          <el-input type="textarea" v-model="formData.reason"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="formData.sort"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "index"
}
</script>
<script setup>
import AutoTable from '@/components/AutoTable'
import {ref, reactive, getCurrentInstance} from "vue";
import api from '@/http_config/api'


const proxy = getCurrentInstance().proxy

proxy.$http.get(api.trainManage.trainType.list).then(res => {

})


const showDialog = ref(false)
const formData = reactive({
  title: '',
  reason: '',
  sort: ''
})

let tableData = reactive([
  {
    title: '入职培训',
    reason: '企业文化、规章制度、职业道德',
  }
])

const columns = [
  {
    label: '分类名称',
    prop: 'title'
  },
  {
    label: '分类描述',
    prop: 'reason'
  },
  {
    label: '操作',
    tdSlot: 'handle'
  },
]

const submitForm = () => {
  tableData.push({
    title: '入职培训',
    reason: '企业文化、规章制度、职业道德-111111',
  })
  console.log('提交')
}

</script>

<style lang="scss" scoped>

</style>
